<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>无缝轮播原生js</title>
		<style>
			body,ul,ol{margin:0;padding:0;font-family:"微软雅黑"}
			li{ list-style:none;}
			img{ border:none; vertical-align:top; }
			/*图片盒子*/
			#box{width:970px;height:350px; position:relative; margin:100px auto; overflow:hidden;}
			/*图片ul*/
			ul{ width:970px;position:relative;}
			ul li{width:970px;}
			ul li img{width:970px;height:350px;}
			/*数字小图标*/
			ol{z-index:2; width:144px; position:absolute;right:10px; bottom:10px;}
			ol li{ width:20px;height:20px; float:left;margin:0 2px; display:inline; background:#fff; color:#000; line-height:20px; text-align:center;border-radius:50%;}
			ol .active{ background:#22B4EB; color:#fff;}
			#box i{width:30px;height:50px;background:#333;color:#fff;text-align:center;line-height:50px;font-style:normal;font-size:40px;position:absolute;cursor:pointer;}
			#box .prev{left:0;top:40%;}
			#box .next{right:0;top:40%;}
		
		</style>
	</head>
	<body>
		
		<div id="box">
			<ul id="imgbox">
				<li style="opacity:1"><img src="../images/lb-1.jpg"/></li>
				<li><img src="../images/lb-2.jpg"/></li>
				<li><img src="../images/lb-3.jpg"/></li>
				<li><img src="../images/lb-4.jpg"/></li>
				<li><img src="../images/lb-5.jpg"/></li>
				<li><img src="../images/lb-6.jpg"/></li>
			</ul>
			<ol id="numol">
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ol>
			<i class="prev">&lt;</i>
			<i class="next">&gt;</i>
		</div>
	
		
		<script src="../js/dom.js"></script>
		<script type="text/javascript">
			//页面加载完后在执行javascript
			window.onload = function(){
				//拿到所有img
				var imgDoms = dom("imgbox").children;
				//获得img个数
				var len = imgDoms.length;
				//拿到所有的小图片li
				var olLiDoms = dom("numol").children;
				//获取第一张图片的高度
				var height = imgDoms[0].offsetHeight;
				//定义时间timer
				var timer = null;
				//定义索引值
				var cindex = 0;

				for(var i=0;i<olLiDoms.length;i++)	{
					//每次循环获取索引值
					olLiDoms[i].index = i;
					//选中索引鼠标移入事件
					olLiDoms[i].onmouseover = function(){
						for(var i=0;i<olLiDoms.length;i++)	{
						//选中元素class设为空
						olLiDoms[i].className = "";
					}
					//当前选中元素class="active"
					this.className = "active";	
					//执行move函数  获取选中的img  设置高度
					move(dom("imgbox"),{top:-height * this.index})
				};
			}
		
			//轮播
			//设置定时器 1s执行一次
			timer =  setInterval(playBanner,1000);
			var cindex2 = 0;
			function playBanner(){
				//判断索引  是否是最后一个  如果是最后一个直接返回第一个  如果不是索引++
 				//cindex = (cindex >= (len-1) ? 0 : ++cindex); 
				if(cindex==0){
					imgDoms[0].style.position = "static";
					dom("imgbox").style.top = 0;
					cindex2 = 0;
				}

				if(cindex == (len-1)){
					imgDoms[0].style.position = "relative";
					imgDoms[0].style.top = len * height+"px";
					cindex = 0;
				}else{
					cindex++;
				}

				cindex2++;
				//选中谁 class=""
				for(var i=0;i<olLiDoms.length;i++)	{
					olLiDoms[i].className = "";
				}
				//数字选中
				olLiDoms[cindex].className = "active";
				move(dom("imgbox"),{top:-height * cindex})
			};
			
			//清除移出动画
			dom("box").onmouseover = function(){
				clearInterval(timer);
			};

			//清除移入动画
			dom("box").onmouseout = function(){
				clearInterval(timer);
				timer = setInterval(playBanner,1000);
			}
		};



		</script>	
		
		
	</body>
</html>
